<template>
  <!-- 考试类型 -->
  <div class="app-container">
    <!-- 查询 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
    >
      <!-- 搜索 科目下拉框 -->
      <el-form-item label="科目:" prop="subjectId">
        <el-select
          v-model="queryParams.subjectId"
          placeholder="请选择科目"
          clearable
          size="small"
          @change="infochange"
        >
          <el-option
            v-for="dict in kelist"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="章:" prop="zhang">
              <el-select v-model="queryParams.zhang" placeholder="请选择章" clearable size="small" @change="zchange" >
                  <el-option
                  v-for="dict in zlist"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                  />
              </el-select>
        </el-form-item>

        <el-form-item label="节:" prop="jie">
              <el-select v-model="queryParams.jie" placeholder="请选择节" clearable size="small" @change="jchange" >
                  <el-option
                  v-for="dict in jlist"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                  />
              </el-select>
        </el-form-item>
      <!-- 搜索 知识点下拉框 -->
      <el-form-item label="知识点:" prop="knowledgeId">
        <el-select
          v-model="queryParams.knowledgeId"
          placeholder="请选择知识点"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in sououtlineList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <!-- 搜索 题型下拉框 -->
      <el-form-item label="题型:" prop="questionTypeId">
        <el-select
          v-model="queryParams.questionTypeId"
          placeholder="请选择题型"
          clearable
          size="small"
          @change="tichange"
        >
          <el-option
            v-for="dict in xialaType"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <!-- 搜索 模块下拉框 -->
      <!-- <el-form-item label="模块:" prop="questionModule">
        <el-select
          v-model="queryParams.questionModule"
          placeholder="请选择模块"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in xialamodule"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item> -->
      <!-- 搜索重置 -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 新增修改 -->
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:examtype:add']"
          >新增</el-button
        >
      </el-col> -->
    <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:course:remove']"
        >批量删除</el-button>
      </el-col> -->
    <!-- <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->
    <!-- 科目表 -->
    <el-table
      show-summary
      :summary-method="getSummaries"
      v-loading="loading"
      :data="infoList"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        label="序号"
        type="index"
        width="70"
        :index="indexMetthod"
        align="center"
      >
      </el-table-column>
      <el-table-column label="科目" align="center" prop="subject" />
      <el-table-column label="知识点" align="center" prop="knowledge" />
      <el-table-column label="题型" align="center" prop="questionType" />
      <!-- <el-table-column label="模块" align="center" prop="questionModule" /> -->
      <el-table-column label="试题数量" align="center" prop="sum" />
      <el-table-column label="封存数量" align="center" prop="archiveSum" />
      <el-table-column label="待删除数量" align="center" prop="deletedSum" />
    </el-table>

    <!-- 分页器 -->
    <pagination
      v-show="1 != 1"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改科目信息对话框 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="考试编码" prop="code">
          <el-input
            ref="gain"
            v-model.trim="form.code"
            placeholder="请输入考试编码"
            onkeyup="value=value.replace(/[^\w]/g,'')"
            maxlength="90"
          />
        </el-form-item>
        <el-form-item label="考试名称" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入考试名称"
            maxlength="90"
          />
        </el-form-item> -->
    <!-- 状态 -->
    <!-- <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item> -->
    <!-- <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
          ></el-input>
        </el-form-item> -->
    <!-- </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  moduleList,
  outlineinfo,
  topicType,
  canSubjects,
  SubjectsName,
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  exportInfo,
  forbidden,
} from "@/api/system/statistical";

export default {
  name: "type",
  data() {
    return {
      // 章
      zlist:[],
      // 节
      jlist:[],
      // 模块下拉
      // xialamodule: [],
      // 搜索-知识点下拉框
      sououtlineList: [],
      kelist: [],
      xialaType: [],
      status: [
        {
          id: 1,
          name: "启用",
        },
        {
          id: 0,
          name: "禁用",
        },
      ],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 科目信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 科目二级联动传输数组
      listers:{
        subjectId:null,
        parentId:null
      },
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        subjectId: null,
        zhang: null,
        jie: null,
        knowledgeId: null,
        questionTypeId: null,
      },
      sxuhaquer: {
        pageNum: 1,
        pageSize: 10,
      },
      // 二级联动科目跟题型
      lianlist: {
        questionTypeId: null,
        subjectId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        code: [
          { required: true, message: "考试编码不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "考试名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.xialaList();
    this.xiala2List();
  },
  methods: {
    // 科目和 知识点联动&&模块联动
    infochange() {
      this.zlist = []  //点击新增的时候清空二级联动  章
      this.jlist = []  //点击新增的时候清空二级联动   节
      this.sououtlineList = []  //点击新增的时候清空二级联动  知识点
      if(this.queryParams.knowledgeId !== null){
        this.queryParams.knowledgeId = null //选择科目的时候清空知识点
      }
      if(this.queryParams.zhang !== null){
        this.queryParams.zhang = null //点击新增的时候清空二级联动   章
      }
      if(this.queryParams.jie !== null){
        this.queryParams.jie = null //点击新增的时候清空二级联动   节
      }
      // if(this.queryParams.questionModuleId !== null){
      //   this.queryParams.questionModuleId = null
      // }
      let list = {...this.listers}
      list.subjectId = this.queryParams.subjectId
      list.parentId = 0
      let type = 0
      // 章列表查询
      outlineinfo(list,type).then(response => {
        this.queryParams.knowledge = null
        this.zlist = response.rows;
        this.loading = false;
      });
    },
    zchange(){
        if(this.queryParams.knowledgeId !== null){
         this.queryParams.knowledgeId = null //点击新增的时候清空二级联动  知识点
        }
        if(this.queryParams.jie !== null){
        this.queryParams.jie = null //点击新增的时候清空二级联动   节
        }
        this.sououtlineList = []  //点击新增的时候清空二级联动  知识点
        this.jlist = []  //点击新增的时候清空二级联动   节
        let list = {...this.listers}
        list.subjectId = this.queryParams.subjectId
        list.parentId = this.queryParams.zhang
        let type = this.queryParams.zhang
        outlineinfo(list,type).then(response => {
          this.jlist = response.rows;
          this.loading = false;
        });
    },
    jchange(){
         if(this.queryParams.knowledgeId !== null){
         this.queryParams.knowledgeId = null //点击新增的时候清空二级联动  知识点
        }
        this.sououtlineList = []  //点击新增的时候清空二级联动  知识点
        let list = {...this.listers}
        list.subjectId = this.queryParams.subjectId
        list.parentId = this.queryParams.jie
        let type = this.queryParams.jie
        outlineinfo(list,type).then(response => {
          this.sououtlineList = response.rows;
          this.loading = false;
        });
    },

    // 题型  change  联动科目
    tichange(){
      // if (this.queryParams.subjectId != null) {
      //   // this.queryParams.questionModule = null
      //   let list = { ...this.lister };
      //   list.subjectId = this.queryParams.subjectId;
      //   list.questionTypeId = this.queryParams.questionTypeId;
        
      //   this.lianlist.questionTypeId = list.questionTypeId;
      //   this.lianlist.subjectId = list.subjectId;
      //   moduleList(
      //     this.lianlist,
      //     this.lianlist.subjectId,
      //     this.lianlist.questionTypeId
      //   ).then((response) => {
      //     this.xialamodule = response.rows;
      //   });
      // }
    },
    // 计算总价
    getSummaries(param) {
      //此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
      const { columns, data } = param;
      const len = columns.length;
      const sums = [];
      columns.forEach((column, index) => {
        //如果是第一列，则最后一行展示为“总计”两个字
        if (index === 0) {
          sums[index] = "合计";
          //如果是最后一列，索引为列数-1，则显示计算总和
        } else if (index === len - 1) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "N/A";
          }
          //如果是除了第一列和最后一列的其他列，则显示为空
        } else if (index === len - 2) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "N/A";
          }
          // sums[index] = "";
        } else if (index === len - 3) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "N/A";
          }
        } else {
        }
      });
      return sums;
    },
    // 隔行效果
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    // 序号
    indexMetthod: function (index) {
      return (
        // (this.sxuhaquer.pageNum - 1) * this.sxuhaquer.pageSize + index + 1
        index + 1
      );
    },
    // 筛选框-科目-下拉
    xialaList() {
      this.loading = true;
      canSubjects().then((response) => {
        this.kelist = response.rows;
        this.loading = false;
        // console.log("搜索科目下拉列表", this.xiala);
      });
    },
    //筛选题型下拉
    xiala2List() {
      this.loading = true;
      topicType().then((response) => {
        this.xialaType = response.rows;
        this.loading = false;
        // console.log("搜索下拉题型模块", this.xialaType);
      });
    },
    /** 查询科目信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then((response) => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
        // console.log("首页列表", this.infoList);
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        jobId: null,
        name: null,
        price: null,
        classPeriod: null,
        speaker: null,
        classPeriodConfType: null,
        invoiceName: null,
        classPeriodSign: null,
        createBy: null,
        createTime: null,
        order: null,
        status: "0",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.knowledgeId = null; //点击重置清空知识点下拉内容
      // this.queryParams.questionModule = null; //点击重置模块下拉内容
      this.sououtlineList = null;
      this.xialamodule = null;
      this.zlist = [];
      this.jlist = [];
      this.sououtlineList = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改考试类型";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.$confirm("是否确认修改数据？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                updateInfo(this.form).then((response) => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              })
              .catch(() => {});
          } else {
            this.$confirm("是否确认新增数据？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                addInfo(this.form).then((response) => {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              })
              .catch(() => {});
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("是否确认删除当前数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delInfo(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script> 